<template>
  <div class="news-info">
		<div class="nf-wrap">
			<div class="nf-title">
				新闻资讯
			</div>
			<ul class="nf-type">
				<li v-for="(item,index) in newsTab" :key="index" @click="findNewsList(item.id)" :class="item.id==newsId?'active':''">
					{{item.name}}
				</li>
			</ul>
			<div class="nf-new">
				<ul class="nf-news" ref='newsList'>
					<li v-for="(item,index) in newsList" :key="index">
						<div class="box">
							<img class="nfn-img" :src="item.img_url"  />
						</div>
						<p class="nfn-title">
							{{item.title}}
						</p>
						<router-link class="nfn-btn" :to="newsPath+item.id">
							新闻详情 >
						</router-link>
					</li>
				</ul>
			</div>
			<div class="nf-button">
				<span class="nfb-left" @click="showNewsLeft()">
					<img src="@/assets/images/btn_left.png"/>
				</span>
				<span class="nfb-left" @click="showNewsLeft()">
					<img src="@/assets/images/btn_right.png"/>
				</span>
			</div>
		</div>
	</div>
</template>

<script>
	import 	Menu 	from "@/service/menu-service.js"
	import 	News 	from "@/service/news-service.js"
	const 	_menu	=	new Menu();
	const 	_news	=	new News();
	export default {
	  name: 'NewsIndex',
	  data :function() {
	    return {
	      newsTab: {},
	      newsId: '',
	      newsList: {},
	      newsPath: '/newsinfo/'
	    }
	  },
	  components:{
	  	
	  },
	  created(){
		  	this.findNewsChild();    //初始化的时候需要查找去新闻的子项目
		},
		methods:{
			// 这是是查找新闻中心的子项目
			findNewsChild(){
				_menu.menuList({'pId':'1'}).then((res)=>{
					this.newsTab = res.data;
					this.newsId	 = res.data[0].id;	
					this.findNewsList(this.newsId);  
				},(errMsg)=>{
					console.log(errMsg)
				})
			},
			// 这个是通过新闻类型进行查找指定的新闻数量
			findNewsList(id){
				this.newsId	 = id;
				_news.newsList({'type': this.newsId,'pageSize':'6','currentPage':'0'}).then((res)=>{
					this.newsList = res.data.slice(0,6);
				},(errMsg)=>{
					console.log(errMsg);
				})
			},
			// 这是进行新闻的内容切换
			showNewsLeft(){
  			if( this.$refs.newsList.style.marginLeft == "" ){
  				this.$refs.newsList.style.marginLeft = "-1200px";
  			}
  			else{
  				this.$refs.newsList.style.marginLeft = "";
  			}
  		}
		}
	}
</script>

<style scoped lang="less">
	.news-info {
		background: #f2f2f2;
		transition: all 2s;
    -webkit-transition: all 2s;
		.nf-wrap {
			width: 1200px;
			margin: 0 auto;
			.nf-title {
				text-align: center;
				font-size: 36px;
				font-weight: bold;
				color: #333;
				padding-top: 70px;
				padding-bottom: 40px;
			}
			.nf-type {
				text-align: center;
				border-bottom: 1px solid #dfdfdf;
				display: table;
				margin: 0 auto;
				li{
					margin-right: 60px;
					padding: 18px;
					float: left;
					cursor: pointer;
				}
				.active{
					position: relative;
					color: #c62e25;
					border-bottom: 4px solid #c62e25;
					&:before{
					    position: absolute;
					    content: "";
					    left: 50%;
					    border-left: 8px solid transparent;
					    border-right: 8px solid transparent;
					    border-top: 8px solid #c62e25;
					    margin-left: -5px;
					    top: 57px;
					}
				}
			}
			.nf-new{
				overflow: hidden;
				.nf-news{
					padding-top: 41px;
					display: table;
					width: 300%;
					margin-left: 0px;
					li{
						float: left;
						width: 325px;
						margin-right: 112px;
						background: #fff;
						text-align: center;
						&:nth-child(3n){
							margin-right: 1px;
						}
						.nfn-img{
							width: 100%;
							height: 220px;
						}
						.nfn-title{
							padding: 23px;
							font-size: 18px;
							color: #333;
							text-align: left;
						}
						.nfn-btn{
							display: inline-block;
							padding: 11px 20px;
							border: 1px solid #C62E25;
							border-radius: 10px;
							cursor: pointer; 
							color: #C62E25; 
							margin: 29px 0px;
							&:hover{
								background: #C62E25;
								color: #fff;
							}
						}
					}
				}
			}
			.nf-button{
				text-align: center;
				padding-top: 40px;
				padding-bottom: 70px;
				.nfb-left{
					display: inline-block;
					margin-right:30px;
					img{
						cursor: pointer;
						width: 27px;
						height: 27px;
					}
				}
			}
		}
	}
</style>